<template>
	<view class="content">
		<!-- 返回主页 -->
		<view class="back" @click="back">
			<view class="backicon"></view>
		</view>
		<view class="title" @click="questsinfo=true">
			<text>请假申请</text>
		</view>
		<view class="Suggesttext">
			<view class="nm" style="margin-top: 30rpx;" @click="questsinfo=true">
				<text>*请假说明</text>
			</view>

			<view style="margin-top: 30rpx; width: 90%;margin-left: 5%;">
				<u--textarea v-model="suggesttext" placeholder="请简单说明请假原因, 不多于200个字" placeholderStyle="color: red;"
					disableDefaultPadding border="bottom" count showConfirmBar maxlength=200 autoHeight></u--textarea>
			</view>
			<view style="margin-top: 20rpx;padding-bottom: 20rpx;float: right;margin-right: 5%;">
			</view>
		</view>
		<view style="width: 90%;">
			<view class="uploadfile">
				<text class="zj">*请假证明</text>
				<view style="margin-left: 40rpx;">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"
						:previewFullImage="true"></u-upload>
				</view>
			</view>
			<view class="timeinfo">
				<view class="nm" style="margin-top: 25rpx;" @click="questsinfo=true">
					<text>*开始时间</text>
				</view>
				<view style="margin-left: 26rpx;margin-top: 15rpx;" @click="show = true">
					<input class="inputstyle" placeholder="请选择时间" disabled="true" v-model="starttime" />
				</view>
				<view class="nm" style="margin-top: 30rpx;" @click="questsinfo=true">
					<text>*结束时间</text>
				</view>
				<view style="margin-left: 26rpx;margin-top: 15rpx;" @click="show2 = true">
					<input class="inputstyle" placeholder="请选择时间" disabled="true" v-model="overtime" />
				</view>
			</view>
		</view>
		<view style="margin-top: 40rpx;">
			<u-button text="提交" @click="CommitSuggest"
				color="linear-gradient(to right, rgb(0, 85, 255), rgb(85, 170, 255))" shape="circle" size="large"
				customStyle="width: 650rpx"></u-button>
		</view>
		<view class="ts" @click="questsinfo=true">
			<text>不清楚请假提交规则？
				<text style="color: blue;text-decoration:1rpx underline;">申请细则</text>
			</text>
		</view>
		<u-datetime-picker :show="show" v-model="value1" itemHeight=54 closeOnClickOverlay @close="closetimepicker"
			mode="datetime" @cancel="closetimepicker" :minDate="mintime" @confirm="checktime" :maxDate="maxtime1">
		</u-datetime-picker>
		<u-datetime-picker :show="show2" v-model="value2" itemHeight=54 closeOnClickOverlay @close="closetimepicker"
			mode="datetime" @cancel="closetimepicker" :minDate="time1" @confirm="checktime2" :maxDate="maxtime">
		</u-datetime-picker>
		<u-popup :show="questsinfo" @close="closeinfo" mode="center" :round="20" overlayOpacity=0.1 closeOnClickOverlay
			zoom>
			<view class="questsinfostyle">
				<view style="text-align: center;width: 100%;font-family: FZSuXSLSJW;
					font-size: 50rpx;margin-top: 20rpx;">
					<text>注意事项</text>
				</view>
				<view class="t1">
					<text>请各位同学<text style="color: red;">仔细阅读</text>以下说明。</text><br>
					<text>1.<text style="color: red;">必须填写</text>的信息有：请假说明、
						请假证明、开始时间和结束时间。</text><br>
					<text>2.请假说明在<text style="color: red;">20~200</text>个字之间，
						并简单说明请假原因，以便检查。</text><br>
					<text>3.请假证明<text style="color: red;">只能上传一张照片</text>，若
						有多张假条请拍在一张照片上传。
						照片<text style="color: red;">大小须小于2M</text>，大于请压缩。</text><br>
					<text>4.开始时间<text style="color: red;">不能早于</text>当前的时间，
						请假时间<text style="color: red;">不能超过一周</text>，如果请假
						时间超过一周，请同学在请假上传
						一周后，再进行提交，<text style="color: red;">否则</text>会覆盖
						之前的记录，不便之处敬请谅解。</text><br>
					<text style="color: red;">5.请确保信息无误后再进行提交，
						切勿重复提交，并且系统会进行检
						测，若情况不符将对上传者进行严
						厉处罚。因此，各位切勿随意提交。</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="dangerinfo" @close="closedanger" mode="center" :round="30" overlayOpacity=0.1 zoom>
			<view class="questsinfostyle">
				<view style="text-align: center;width: 100%;font-family: FZSuXSLSJW;
					font-size: 50rpx;margin-top: 20rpx;">
					<text>系统提醒</text>
				</view>
				<view class="t1" style="">
					<text>系统检测发现您申请的
						日期与{{dangerlist.length}}条记录有冲突
						具体的日期如下所示：</text><br>
					<view v-for="item in dangerlist" style="background-color: cornflowerblue;
						color: white;border-radius: 40rpx;margin-top: 10rpx;width: 90%;margin-left: 5%;">
						<text>开始时间{{item.request_start}}</text><br>
						<text>结束时间{{item.request_end}}</text>
					</view>
					<view style="width: 90%;margin-left: 5%;">
						<text style="color: red;">请问您是否还要继续进行添加请假记录，若继续添加系统将会以新纪录覆盖，覆盖后可能会影响之前的考勤记录和个人评分。</text>
					</view>

				</view>
				<view style="width: 100%;">
					<view style="margin-top: 20rpx;">
						<u-button text="不了，我再想想" @click="Nochange"
							color="linear-gradient(to right, rgb(0, 85, 255), rgb(85, 170, 255))" shape="circle"
							size="large" customStyle="width: 350rpx"></u-button>
					</view>
					<view style="margin-top: 20rpx;">
						<u-button text="是的，我要修改" @click="Yeschange"
							color="linear-gradient(to right, rgb(0, 0, 0), rgb(140, 140, 140))" shape="circle"
							size="large" customStyle="width: 350rpx"></u-button>
					</view>

				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		HNIT_URL,
		USERNAME
	} from "@/constants/index.js";
	import {
		data
	} from '../../../uni_modules/uview-ui/libs/mixin/mixin';
	export default {
		data() {
			return {
				questsinfo: true,
				time2: "",
				time1: "", // 结束时间的最小可选时间
				starttime: "", // 开始时间（yyyy-mm-dd
				overtime: "", // 结束时间（yyyy-mm-dd
				show: false, // 显示开始时间的选择框
				show2: false, // 显示关闭时间的选择框
				value1: new Date(), // 开始时间值(number)
				value2: new Date(), // 结束时间值(number)
				suggesttext: "", // 请假原因
				filetext: "",
				fileList1: [], // 证明材料
				fileurllist: [], // 存放文件的url
				newfilepath: [], // 存放上传成功后返回的文件新路径
				now: "", // 当前时间
				mintime: "", // 开始时间的最小选择时间
				maxtime1: "", // 开始时间的最大选择时间
				maxtime: "", // 结束时间的最大选择时间
				dangerinfo: false, // 是否显示系统提示
				dangerstarttime: "", // 系统提示上的开始时间
				dangerendtime: "", // 系统提示上的结束时间
				dangerlist: [],// 冲突的请假记录
				dangerid:"",
			}
		},
		onLoad() {
			this.nowtime()
		},
		mounted() {
			// 时间类型转换
			Date.prototype.format = function(fmt) {
				var o = {
					"M+": this.getMonth() + 1, //月份
					"d+": this.getDate(), //日
					"h+": this.getHours(), //小时
					"m+": this.getMinutes(), //分
					"s+": this.getSeconds(), //秒
					"q+": Math.floor((this.getMonth() + 3) / 3), //季度
					"S": this.getMilliseconds() //毫秒
				};
				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				}
				for (var k in o) {
					if (new RegExp("(" + k + ")").test(fmt)) {
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[
							k]).length)));
					}
				}
				return fmt;
			}
		},
		methods: {
			// 确定修改冲突记录
			Yeschange(){
				// 获取缓存中的学生id
				var stuid = uni.getStorageSync(USERNAME);
				// 上传证据照片
				for (let i = 0; i < this.fileurllist.length; i++) {
					// console.log(this.fileurllist[i]) // 打印url
					const result = this.uploadFilePromise(this.fileurllist[i])
				}
				for (let i = 0; i < this.dangerlist.length; i++) {
					var id = this.dangerlist[i].id
					this.dangerid = this.dangerid + id + ","
				}
				wx.showToast({
					title: '上传中', //提示的内容
					duration: 4000, //持续的时间
					icon: 'loading',
					mask: true //显示透明蒙层 防止触摸穿透
				})
				setTimeout(() => {
					// 请求参数
					let params = {
						dlist: this.dangerid, // 冲突的请假记录
						stuid: stuid, // 学生id
						reson: this.suggesttext, // 请假原因
						starttime: this.starttime, // 开始时间
						overtime: this.overtime, // 结束时间
						newFilePath: this.filetext // 上传后的地址
					}
					// 发起请求
					this.$request.post(HNIT_URL + "wx/Insertleaverequest2",
						params).then(res => {
						if (res.msg == "大于七天") {
							uni.showToast({
								icon: 'error',
								title: res.msg
							})
							this.overtime = ""
						} else {
							uni.showToast({
								title: res.msg
							})
							// 上传成功数据清空
							this.suggesttext = ""
							this.fileList1 = []
							this.fileurllist = []
							this.newfilepath = []
							this.starttime = ""
							this.overtime = ""
							this.deletePic
						}

					})

				}, 1000)
				this.dangerinfo = false
			},
			// 取消修改冲突记录
			Nochange(){
				this.starttime = ""
				this.overtime = ""
				this.dangerinfo = false
			},
			// 关闭重复提示
			closedanger() {
				this.dangerinfo = false
			},
			// 关闭请假详情
			closeinfo() {
				this.questsinfo = false
			},
			// 获取当前时间
			nowtime() {
				var date = new Date();
				var year = date.getFullYear(); // 获取当前年份
				var month = date.getMonth() + 1; // 获取当前月份（注意月份从0开始，所以需要加1）
				var day = date.getDate(); // 获取当前日期
				var hour = date.getHours(); // 时
				var minutes = date.getMinutes(); // 分
				var seconds = date.getSeconds() //秒
				var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
				var week = weekArr[date.getDay()];
				// 给一位数的数据前面加 “0”
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (day >= 0 && day <= 9) {
					day = "0" + day;
				}
				if (hour >= 0 && hour <= 9) {
					hour = "0" + hour;
				}
				if (minutes >= 0 && minutes <= 9) {
					minutes = "0" + minutes;
				}
				if (seconds >= 0 && seconds <= 9) {
					seconds = "0" + seconds;
				}
				this.now = year + "-" + month + "-" + day + " " + hour + ":" + minutes
				this.mintime = Date.parse(this.now)
				this.time1 = Date.parse(this.now)
				var res = new Date(this.now);
				res.setDate(res.getDate() + 20);
				this.maxtime1 = Date.parse(res)
			},
			// 确定结束时间
			checktime2(value) {
				this.overtime = new Date(value.value).format("yyyy-MM-dd hh:mm");
				this.time2 = Date.parse(value.value) || value.value
				var daynum = new Date(this.time2 - this.time1).format("dd") // 计算开始时间和结束时间之间的天数
				this.show2 = false
				if (daynum - 1 > 7) {
					wx.showToast({
						title: '天数大于7天', //提示的内容
						duration: 3000, //持续的时间
						icon: 'error',
						mask: true //显示透明蒙层 防止触摸穿透
					})
					this.overtime = ""
				}
			},
			// 确定开始时间
			checktime(value) {
				// 将开始时间设定为结束时间的最小可选择时间
				this.time1 = Date.parse(value.value) || value.value
				// 转换时间类型
				this.starttime = new Date(value.value).format("yyyy-MM-dd hh:mm");
				var res = new Date(this.time1);
				res.setDate(res.getDate() + 7);
				this.maxtime = Date.parse(res)
				this.show = false // 关闭弹窗
			},
			// 关闭时间选择框
			closetimepicker() {
				this.show = false
				this.show2 = false
			},
			// 返回上一页
			back() {
				uni.reLaunch({
					url: '/pages/student/home/index'
				});
			},
			// 提交
			CommitSuggest() {
				// 获取缓存中的学生id
				var stuid = uni.getStorageSync(USERNAME);
				// 上传证据照片
				for (let i = 0; i < this.fileurllist.length; i++) {
					// console.log(this.fileurllist[i]) // 打印url
					const result = this.uploadFilePromise(this.fileurllist[i])
				}
				wx.showToast({
					title: '上传中', //提示的内容
					duration: 2000, //持续的时间
					icon: 'loading',
					mask: true //显示透明蒙层 防止触摸穿透
				})

				if (this.suggesttext == "") {
					wx.showToast({
						title: '原因不能为空', //提示的内容
						duration: 2000, //持续的时间
						icon: 'error',
						mask: true //显示透明蒙层 防止触摸穿透
					})
				} else if (this.starttime == "" || this.overtime == "") {
					wx.showToast({
						title: '时间不能为空', //提示的内容
						duration: 2000, //持续的时间
						icon: 'error',
						mask: true //显示透明蒙层 防止触摸穿透
					})
				} else {
					var daynum = new Date(this.time2 - this.time1).format("dd") // 计算开始时间和结束时间之间的天数
					this.show2 = false
					if (daynum - 1 > 7) {
						wx.showToast({
							title: '天数大于7天', //提示的内容
							duration: 2000, //持续的时间
							icon: 'error',
							mask: true //显示透明蒙层 防止触摸穿透
						})
						this.overtime = ""
					} else {
						setTimeout(() => {
							// 请求参数
							let params = {
								stuid: stuid, // 学生id
								starttime: this.starttime, // 开始时间
								overtime: this.overtime, // 结束时间
							}
							// 发起请求
							this.$request.post(HNIT_URL + "wx/updateleavequest", params).then(res => {
								this.dangerlist = res
								if (res.length != 0) {
									this.dangerinfo = true
								} else {
									setTimeout(() => {
										// 请求参数
										let params = {
											stuid: stuid, // 学生id
											reson: this.suggesttext, // 请假原因
											starttime: this.starttime, // 开始时间
											overtime: this.overtime, // 结束时间
											newFilePath: this.filetext // 上传后的地址
										}
										// 发起请求
										this.$request.post(HNIT_URL + "wx/Insertleaverequest",
											params).then(res => {
											if (res.msg == "大于七天") {
												uni.showToast({
													icon: 'error',
													title: res.msg
												})
												this.overtime = ""
											} else {
												uni.showToast({
													title: res.msg
												})
												// 上传成功数据清空
												this.suggesttext = ""
												this.fileList1 = []
												this.fileurllist = []
												this.newfilepath = []
												this.starttime = ""
												this.overtime = ""
												this.deletePic
											}

										})

									}, 1000)
								}
							})

						}, 1000)
					}
				}
			},
			// 删除上传的图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.fileurllist[event.index] = ""
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length

				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: 'success',
					})
				})

				for (let i = 0; i < lists.length; i++) {
					this.fileurllist.unshift(lists[i].url)
				}
			},
			// 照片上传
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: HNIT_URL + "wx/upload", // 后端api接口
						filePath: url, // uni.chooseImage函数调用后获取的本地文件路劲
						name: 'file', //后端通过'file'获取上传的文件对象
						header: {
							"Content-Type": "multipart/form-data"
						},
						success: (res) => {
							let data = JSON.parse(res.data);
							this.filetext = data.data
							resolve(res.data)
						}
					});
				})
			},
			checkboxChange(n) {

			},
		}
	}
</script>

<style>
	.t1 {
		color: #595959;
		margin-top: 20rpx;
		font-size: 32rpx;
		text-align: center;
		width: 90%;
		margin-left: 5%;
	}

	.questsinfostyle {
		width: 600rpx;
	}

	.inputstyle {
		width: 350rpx;
		background-color: #e6e6e6;
		border-radius: 20rpx;
		text-align: center;
	}

	.timeinfo {
		width: 400rpx;
		border-radius: 40rpx;
		margin-top: 40rpx;
		float: right;
		height: 320rpx;
		background-color: white;
	}

	.backicon {
		background-image: url("data:image/svg+xml,%3Csvg t='1689146294791' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='19508' width='200' height='200'%3E%3Cpath d='M501.30944 464.22016c0-19.99872-16-35.19488-35.99872-35.99872H310.4V350.62784L137.61536 464.22016l171.98592 113.59232V500.21888h155.70944c19.99872-0.79872 35.99872-16 35.99872-35.99872z' fill='%23005CFF' p-id='19509'%3E%3C/path%3E%3Cpath d='M886.38464 212.01408c0-39.46496-31.99488-71.45984-71.45984-71.45984H443.88864c-39.46496 0-71.45984 31.99488-71.45984 71.45984v117.69856a29.42464 29.42464 0 1 0 58.84928 0V225.00352a25.6 25.6 0 0 1 25.6-25.6h358.05184c2.72384 0 5.23264 0.88576 7.296 2.3552l-252.50816 91.904c-15.872 5.77536-28.74368 29.28128-28.74368 52.49536v382.88384H456.87808a25.6 25.6 0 0 1-25.6-25.6V598.7328a29.42464 29.42464 0 1 0-58.84928 0v117.69856c0 39.46496 31.99488 71.45984 71.45984 71.45984h97.08544v62.68928c0 23.21408 12.86656 37.3504 28.74368 31.57504l287.42144-104.61184c15.872-5.77536 28.74368-29.28128 28.74368-52.49536v-0.39424c0.3072-2.69824 0.50688-5.43232 0.50688-8.2176v-504.4224z' fill='%23005CFF' p-id='19510'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 6rpx;
		margin-left: 12rpx;
	}

	.back {
		float: left;
		width: 80rpx;
		margin-top: 99rpx;
		height: 58rpx;
		margin-left: -640rpx;
		border-radius: 80rpx;
		backdrop-filter: blur(5px);
		/* 设置高斯模糊效果 */
		background-color: rgba(255, 255, 255, 0.9);
		border: 1rpx #c6c6c6 solid;
	}

	.ts {
		text-align: center;
		margin-top: 20rpx;
		float: right;
		margin-left: 0rpx;
		width: 90%;
		color: #595959;
		/* color: #e63333; */
	}

	.nm {
		font-family: FZSuXSLSJW;
		color: #595959;
		font-size: 36rpx;
		margin-top: 20rpx;
		margin-left: 40rpx;
	}

	.zj {
		color: #595959;
		line-height: 100rpx;
		font-family: FZSuXSLSJW;
		font-size: 36rpx;
		margin-left: 40rpx;
	}

	.uploadfile {
		margin-top: 40rpx;
		border-radius: 30rpx;
		width: 240rpx;
		float: left;
		background-color: white;
		height: 320rpx;
	}

	page {
		background-color: #eeeeee;
	}

	.Suggesttext {
		width: 90%;
		background-color: white;
		margin-top: 40rpx;
		border-radius: 30rpx;
	}

	.title {
		margin-top: -60rpx;
		font-family: FZSuXSLSJW;
		font-size: 50rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>